<!--首页统计-->
<style lang="scss" scoped>

  @function vw($width) {
    @return ($width * 100vw / 1920);
  }

  @function vh($height) {
    @return ($height * 100vh / 1080);
  }

  .app-container {
    background-color: #EDEFF9;
    padding: 30px;
    min-width: 1240px;

    p {
      position: relative;
      margin: 0;
      font-family: Source Han Sans;
      display: inline-block;
      font-size: vh(18);
      font-weight: 600;
      font-feature-settings: "kern" on;
      color: #3D3D3D;
      margin: 0 0 vh(18) vw(8);

      &::before {
        content: "";
        display: inline-block;
        position: absolute;
        top: 50%;
        left: vw(-8);
        transform: translateY(-50%);
        width: vw(3);
        height: vh(16);
        background-color: #116BFF;
        border-radius: 2px;
      }
    }

    .row-one {
      width: 100%;
      display: flex;
      margin-bottom: vh(30);

      .cols {
        height: vh(352);
        border-radius: 16px;
        opacity: 1;
        background: rgba(255, 255, 255, 0.7);
        padding: vh(20) vh(20) 0 vw(20);
        box-sizing: border-box;
        margin-right: 2%;
        overflow: hidden;

        .cols-con {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          flex: 1;

          .cols-con-i {
            display: flex;
            align-items: center;
            margin-bottom: vh(36);

            &:nth-last-child(1) {
              margin-bottom: 0;
            }

            img {
              width: vh(62);
              height: vh(62);
              margin-right: vw(24);
            }

            .cols-con-item-middle {
              position: relative;

              .row {
                display: flex;
                align-items: center;

                .num {
                  font-family: HarmonyOS Sans SC;
                  font-size: vh(30);
                  font-weight: 900;
                  font-feature-settings: "kern" on;
                  color: #3D3D3D;
                  white-space: nowrap;
                }

                .money {
                  padding: vh(6) vw(10);
                  line-height: vh(30);
                  text-align: center;
                  border-radius: 85px;
                  font-family: HarmonyOS Sans SC;
                  font-size: 16px;
                  font-weight: bold;
                  font-feature-settings: "kern" on;
                  margin-left: vw(20);
                  padding: 0 vh(10);
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  background: rgba(255, 171, 68, 0.15);
                  color: #FF8C00;
                }
              }

              .wei {
                &::after {
                  content: attr(data-price);
                  background: rgba(255, 171, 68, 0.15);
                  color: #FF8C00;
                }
              }

              .zong {
                &::after {
                  content: attr(data-price);
                  background: rgba(68, 183, 255, 0.15);
                  color: #0D97EE;
                }
              }

              .nei {
                &::after {
                  content: attr(data-price);
                  background: rgba(255, 92, 92, 0.15);
                  color: #FF5C5C;
                }
              }

              .txt {
                font-family: Source Han Sans SC;
                font-size: vh(14);
                font-weight: normal;
                color: #3D3D3D;
              }
            }
          }
        }
      }

      .cols-table {
        height: vh(352);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.7);
        padding: 20px;
        box-sizing: border-box;

        .cols-con {
          .cols-con-title {
            display: flex;
            height: vh(40);
            border-radius: 8px;
            background: #3A84FF;
            box-sizing: border-box;

            .cols-con-title-item {
              width: vw(64);
              height: vh(40);
              line-height: vh(40);
              font-family: Source Han Sans SC;
              font-size: vh(16);
              font-weight: normal;
              text-align: center;
              color: #fff;
            }
          }

          .wrap {
            height: vh(230);
            overflow: hidden;

            .wrap-scroll {
              height: vh(230);
              overflow: auto;

              &::-webkit-scrollbar {
                width: 0;
                display: none;
              }
            }
          }

          .cols-con-list {
            display: flex;
            border-bottom: 1px solid #E1E9F4;

            ::v-deep.el-progress__text {
              font-size: 14px !important;
            }

            .cols-con-list-item {
              display: flex;
              justify-content: center;
              align-items: center;
              height: vh(49);
              line-height: 49px;
              border-radius: 1px solid #DAE4F1;
              text-align: center;

              ::v-deep.el-progress {
                width: 100%;
              }

              .block {
                width: 10px;
                height: 8px;
                background: #3295FF;
                border-radius: 2px;
              }

              .game-name {
                font-family: Source Han Sans SC;
                font-size: vh(14);
                font-weight: normal;
                color: #3D3D3D;
                margin-left: 6px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }

        .w70 {
          width: vw(80) !important;
        }

        .w110 {
          width: vw(190) !important;
          text-align: left;
        }

        .w380 {
          width: vw(340) !important;
          padding-right: vw(30);
        }
      }
    }

    .game {
      display: flex;
      width: 100%;
      margin-bottom: vh(20);

      .game-item {
        display: flex;
        width: 49%;
        background-color: #fff;
        border-radius: 16px;

        &:nth-child(1) {
          margin-right: 2%;
        }

        .game-item-l {
          width: 55%;
          padding: vh(20) 0 0 vw(20);

          .game-item-l-title {
            p {
              font-family: Source Han Sans;
              font-size: vh(18);
              font-weight: 500;
              line-height: normal;
              font-feature-settings: "kern" on;
              color: #3D3D3D;
            }
          }

          .game-item-l-con {
            overflow: auto;

            &::-webkit-scrollbar {
              display: none;
              width: 0;
            }
          }
        }

        .game-item-con {
          height: vh(300);

          .game-item-con-item {
            width: vw(732);
            height: 36px;
            border-radius: 8px;
            background: #EDEFF4;
            margin-bottom: 12px;

            .con-itme-l {
              line-height: 36px;
              padding: 0 20px;
              box-sizing: border-box;

              .week {
                font-family: HarmonyOS Sans SC;
                font-size: vh(14);
                font-weight: normal;
                color: #3D3D3D;
              }

              .g-name {
                font-family: HarmonyOS Sans SC;
                font-size: vh(14);
                font-weight: normal;
                color: #3D3D3D;
              }
            }

            .con-item-r {
              .status {
                width: 40px;
                height: 20px;
                border-radius: 4px;
                background: #49C76B;
              }

              .diff-num {
                font-family: HarmonyOS Sans SC;
                font-size: vh(14);
                font-weight: normal;
                color: #3D3D3D;
              }
            }
          }
        }
      }

      .game-item4 {
        display: block;
        padding: vh(20) vw(20);
      }
    }
  }
</style>

<template>
  <div class="app-container">
    <!--第一行-->
    <div class="row-one">
      <div class="cols" style="width:20%;">
        <p>账号库存总览</p>
        <div class="cols-con" v-if="totalTxt">
          <div class="cols-con-i">
            <img src="../../assets/home/weishouzhaohui.png"/>
            <div class="cols-con-item-middle">
              <div class="row">
                <span class="num">{{totalTxt.normalInt || 0}}</span> <span
                class="money">{{totalTxt.bigDecimal || 0}}</span>
              </div>
              <div class="txt">库内未售</div>
            </div>
          </div>
          <div class="cols-con-i">
            <img src="../../assets/home/yishouyichang.png" alt="">
            <div class="cols-con-item-middle">
              <div class="row">
                <span class="num">{{totalTxt.singular || 0}}</span><span
                class="money">{{totalTxt.abnormalBigDecimal ||0}}</span>
              </div>
              <div class="txt">库内异常总金额</div>
            </div>
          </div>
          <div class="cols-con-i">
            <img src="../../assets/home/huishoujine.png" alt="">
            <div class="cols-con-item-middle">
              <div class="row">
                <span class="num">{{totalTxt.abnormaInt || 0}}</span> <span
                class="money">{{totalTxt.abnormalBigDecimal || 0}}</span>
              </div>
              <div class="txt">库内总数量</div>
            </div>
          </div>
        </div>
      </div>

      <div class="cols-table" style="width: 80%;">
        <p>游戏品类数据看板</p>
        <div class="cols-con">
          <div class="cols-con-title">
            <span class="cols-con-title-item w70">序号</span> <span class="cols-con-title-item w110">商品名称</span> <span
            class="cols-con-title-item w380">未售数量</span> <span class="cols-con-title-item w110"
                                                               style="text-align: left;">未售成本金额</span> <span
            class="cols-con-title-item w380">异常数量</span> <span class="cols-con-title-item w110"
                                                               style="text-align: left;">异常金额</span>
          </div>
          <div class="wrap">
            <div class="wrap-scroll">
              <div class="cols-con-list" v-for="(item,indx) in pie" :key="indx">
                <div class="cols-con-list-item w70">{{indx + 1}}</div>
                <div class="cols-con-list-item w110">
                  <span class="block" :style="bgParse(indx)"></span> <span class="game-name">{{item.gameName}}</span>
                </div>
                <div class="cols-con-list-item w380">
                  <el-progress :stroke-width="10" :percentage="rest(item,'rest')" define-back-color="#EDEFF4"
                               :format="format"/>
                </div>
                <div class="cols-con-list-item w110"
                     style="text-align: left;justify-content:flex-start;">{{item.bigDecimal}}
                </div>
                <div class="cols-con-list-item w380">
                  <el-progress :stroke-width="10" :percentage="rest(item,'unnormal')" define-back-color="#EDEFF4"
                               :format="format"/>
                </div>
                <div class="cols-con-list-item w110"
                     style="text-align: left;justify-content:flex-start;">{{item.abnormalBigDecimal}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--第二行-->
    <div class="game">
      <div class="game-item game-item4">
        <div class="game-item-l-title">
          <p>账号库存近七日回收数量走势</p>
        </div>
        <div class="game-item-con">
          <lineGradientEcharts id="1" colorStart="#FB9982" lineColor="#FF8467" :data="Sevendayinventorypl"/>
        </div>
      </div>

      <div class="game-item game-item4">
        <div class="game-item-l-title">
          <p>账号库存近七日销量数量走势</p>
        </div>
        <div class="game-item-con">
          <lineGradientEcharts id="2" colorStart="#A5BBFD" lineColor="#4469FF" :data="Sevendaysalesdata"/>
        </div>
      </div>
    </div>

    <!--第三行-->
    <div class="game">
      <div class="game-item game-item4">
        <div class="game-item-l-title" style="display:flex;justify-content: space-between;">
          <p>账号库存单品数量增长</p>
          <el-button class="el-icon-search" type="primary" size="mini" style="height: 30px;">筛选</el-button>
        </div>

        <div class="game-item-con">
          <div class="game-item-con-item">
            <div class="con-itme-l">
              <span class="week">星期一</span> <span class="g-name">王者</span>
            </div>
            <div class="con-item-r">
              <span class="status"></span> <span class="diff-num"></span> <span class="icon"></span>
            </div>
          </div>
        </div>
      </div>

      <div class="game-item game-item4">
        <div class="game-item-l-title" style="display:flex;justify-content: space-between;">
          <p>每日库存数据情况({{dictLabel}})</p>
          <el-popover placement="top-start" width="300" trigger="hover">
            <el-radio-group v-model="dictCode" @change="getStorageByGameCode">
              <el-row>
                <el-col style="margin-bottom: 5px;" :span="12" v-for="(item,indx) in gameList" :key="indx">
                  <el-radio :label="item.dictCode">{{item.dictLabel}}
                  </el-radio>
                </el-col>
              </el-row>
            </el-radio-group>
            <el-button slot="reference" class="el-icon-search" type="primary" size="mini" style="height: 30px;">筛选
            </el-button>
          </el-popover>
        </div>
        <div class="game-item-con">
          <lineGradientEcharts id="3" colorStart="#68C8DA" lineColor="#26B1CB" :data="gameLeftList"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {
        getLargeMarket, getLogLogPlot, getgame
    } from '@/api/business/home.js';
    import lineGradientEcharts from "./components/lineGradientEcharts.vue";

    export default {
        components: {lineGradientEcharts},
        data() {
            return {
                totalTxt: undefined,
                colors: ['#68D8EE', '#3295FF', '#2C53DE', '#FF7053', '#FFC422'],
                Sevendaysalesdata: [],//七日销售数据
                Sevendayinventorypl: [],//回收
                gameList: [],
                gameLeftList: [],
                pie: [],//数据大盘来源
                dictCode: ''

            }
        },
        computed: {
            dictLabel() {
                if (this.gameList.length > 0) {
                    let game = this.gameList.find(i => i.dictCode == this.dictCode);
                    return game.dictLabel;
                }
            }
        },

        methods: {
            format(percentage) {
                return `${percentage}%`;
            },

            // 未售数量
            rest(item, type) {
                let percent = 0, total = item.singular;
                if (type == 'rest') {
                    let num = item.normalInt || 0;
                    percent = (num / total * 100).toFixed(0);
                } else {
                    let abnor = item.abnormaInt;
                    percent = (abnor / total * 100).toFixed(0)
                }
                return Number(percent);
            },

            // 颜色块
            bgParse(indx) {
                if (indx % 5 == 0) return "background-color:#" + "7F5EF7";
                if (indx % 5 == 1) return "background-color:#" + "FFE350";
                if (indx % 5 == 2) return "background-color:#" + "3295FF";
                if (indx % 5 == 3) return "background-color:#" + "2C53DE";
                if (indx % 5 == 4) return "background-color:#" + "FFA566";
            },

            getData() {
                // 数据大盘
                getLargeMarket().then(res => {
                    this.pie = res.data.marketPercentage['percentageChart'];
                    this.totalTxt = res.data.marketPercentage.percentagemarketData;
                })

                // 七日动态
                getLogLogPlot().then(res => {
                    // abnormalBigDecimal 库存金额
                    // singular 库存数量
                    // abnormaInt回收库存号
                    // bigDecimal  回收库存号金额
                    this.Sevendayinventorypl = res.data.Sevendayinventorypl;//回收和动态
                    this.Sevendaysalesdata = res.data.Sevendaysalesdata;//七日销售数据
                });

                // 获取游戏库存
                this.getStorageByGameCode();
            },

            // 事件
            getStorageByGameCode() {
                this.gameLeftList = [];
                if (this.dictCode) {
                    getgame(this.dictCode).then(res => {
                        this.gameLeftList = res.data;
                    })
                }
            },
        },
        created() {
            //查询游戏列字典
            this.getDicts('game_category').then(res => {
                this.gameList = res.data
                this.dictCode = this.gameList[0].dictCode;
                this.getData();
            })
        }
    }
</script>
